<!DOCTYPE html>
<html>
<head>
    <title>Particle Decay Diagram</title>
</head>
<body>
    <canvas id="particleDecayCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('particleDecayCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Font Settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;

        // --- Helper function to draw an arrow ---
        function drawArrow(x1, y1, x2, y2) {
            const headlen = 12; // length of arrow head in pixels
            const angle = Math.atan2(y2 - y1, x2 - x1);
            
            // Draw the line
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Draw the arrowhead
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }

        // --- Main Diagram Coordinates and Parameters ---
        const yCenter = 160;
        const vertexX = 260;
        const mainLineStartX = 40;
        const mainLineEndX = 460;
        
        const symbolFont = 'italic 32px "Times New Roman"';
        const captionFont = '24px "Times New Roman"';

        // 1. Draw the main horizontal line (path of η')
        ctx.beginPath();
        ctx.moveTo(mainLineStartX, yCenter);
        ctx.lineTo(mainLineEndX, yCenter);
        ctx.stroke();

        // 2. Draw the η' label
        ctx.font = symbolFont;
        ctx.textAlign = 'center';
        ctx.fillText("η'", 110, yCenter + 45);

        // 3. Draw the velocity vector 'v'
        const vStartX = 120;
        const vEndX = 180;
        const vY = yCenter - 45;
        drawArrow(vStartX, vY, vEndX, vY);
        ctx.fillText("υ", (vStartX + vEndX) / 2, vY - 10);

        // 4. Draw the outgoing particle paths (γ and ρ⁰)
        const particleLen = 160;
        const angleGammaRad = -Math.PI / 6; // -30 degrees
        const angleRhoRad = Math.PI / 5;   // 36 degrees

        const gammaEndX = vertexX + particleLen * Math.cos(angleGammaRad);
        const gammaEndY = yCenter + particleLen * Math.sin(angleGammaRad);
        drawArrow(vertexX, yCenter, gammaEndX, gammaEndY);

        const rhoEndX = vertexX + particleLen * Math.cos(angleRhoRad);
        const rhoEndY = yCenter + particleLen * Math.sin(angleRhoRad);
        drawArrow(vertexX, yCenter, rhoEndX, rhoEndY);

        // 5. Draw the particle labels (γ and ρ⁰)
        ctx.font = symbolFont;
        // γ label
        ctx.fillText("γ", vertexX + 80, yCenter - 75);

        // ρ⁰ label (draw ρ and superscript 0 separately)
        ctx.fillText("ρ", vertexX + 85, yCenter + 90);
        const originalFont = ctx.font;
        ctx.font = '20px "Times New Roman"'; // Smaller font for superscript
        ctx.fillText("0", vertexX + 102, yCenter + 78);
        ctx.font = originalFont; // Restore font

        // 6. Draw the angle θ
        const arcRadius = 50;
        ctx.beginPath();
        ctx.arc(vertexX, yCenter, arcRadius, angleGammaRad, 0);
        ctx.stroke();

        // Draw the θ label inside the arc
        const thetaLabelAngle = angleGammaRad / 2;
        const thetaLabelRadius = arcRadius * 0.65;
        ctx.fillText("θ", vertexX + thetaLabelRadius * Math.cos(thetaLabelAngle) + 5, 
                         yCenter + thetaLabelRadius * Math.sin(thetaLabelAngle) + 10);

        // 7. Draw the figure caption
        ctx.font = captionFont;
        ctx.fillText("Fig. 4.5", 250, 330);

    </script>
</body>
</html>